<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../../public/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="../../../public/css/public.css" media="all" />

</head>

<body class="childrenBody">
	
        
	<fieldset class="layui-elem-field layui-field-title">
		<legend>无边框表格</legend>
	</fieldset>  
		
	<table class="layui-table" lay-even="" lay-skin="nob">
		<colgroup>
			<col width="150">
			<col width="150">
			<col width="200">
			<col>
			<col style="width: 100px; float: right;">
		</colgroup>
		<thead>
			<tr>
				<th>人物</th>
				<th>民族</th>
				<th>出场时间</th>
				<th>格言</th>
				<th>操作</th>
			</tr> 
		</thead>
		<tbody>
			<tr>
				<td>贤心</td>
				<td>汉族</td>
				<td>1989-10-14</td>
				<td>人生似修行</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>张爱玲</td>
				<td>汉族</td>
				<td>1920-09-30</td>
				<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>Helen Keller</td>
				<td>拉丁美裔</td>
				<td>1880-06-27</td>
				<td> Life is either a daring adventure or nothing.</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>岳飞</td>
				<td>汉族</td>
				<td>1103-北宋崇宁二年</td>
				<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>孟子</td>
				<td>华夏族（汉族）</td>
				<td>公元前-372年</td>
				<td>猿强，则国强。国强，则猿更强！ </td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>Helen Keller</td>
				<td>拉丁美裔</td>
				<td>1880-06-27</td>
				<td> Life is either a daring adventure or nothing.</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>岳飞</td>
				<td>汉族</td>
				<td>1103-北宋崇宁二年</td>
				<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
			<tr>
				<td>孟子</td>
				<td>华夏族（汉族）</td>
				<td>公元前-372年</td>
				<td>猿强，则国强。国强，则猿更强！ </td>
				<td><a class="layui-btn layui-btn-primary layui-btn-sm layui-sideSlip"><i class="layui-icon layui-icon-fenxiang1"></i></a></td>
			</tr>
		</tbody>
	</table> 
			
	
	<div class="layui-slipBg"></div>
	<div class="layui-slipContent">
		<div class="layui-row tit">更多<a class='layui-icon layui-icon-yuejuancuohao'></a></div>
		<form class="layui-form detail">
			<div class="cont">
				<fieldset class="layui-elem-field layui-field-title layui-col-xs12">
					<legend>分类1</legend>
				</fieldset>
				
				<div class="layui-form-item">
					<label class="layui-form-label">普通输入框</label>
					<div class="layui-input-block">
						才源软件科技有限公司
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">验证必填项</label>
					<div class="layui-input-block">
						才源软件科技有限公司
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-block">
						<label class="layui-form-label">验证手机</label>
						<div class="layui-input-block">
							1234567890
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-block">
						<label class="layui-form-label">验证邮箱</label>
						<div class="layui-input-block">
							1234567890@XX.COM
						</div>
					</div>
				</div>


				<fieldset class="layui-elem-field layui-field-title layui-col-xs12">
					<legend>分类2</legend>
				</fieldset>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">普通文本域</label>
					<div class="layui-input-block">
						才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司 才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司 才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司才源软件科技有限公司
					</div>
				</div>

			</div>
			<!-- 如上：cont放表单内容；为了不影响layui自带的验证，把form放在了最外层：
				1. 普通的新增或修改，如果不想用固定按钮，就用原来的按钮布局
				2. 详情，即当form有detail时，下方layui-slipConfirm将会触发关闭弹框事件 -->
			<div class="layui-slipConfirm"><a class="layui-btn">确定</a></div>
		</form>
	</div>

	<script type="text/javascript" src="../../../public/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../public/layui/layui.js"></script>
	<script type="text/javascript" src="../../../public/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="egList.js"></script>
	<script>

	layui.use(['form', 'element', 'laydate'], function() {
		var form = layui.form,
			element = layui.element;
		laydate = layui.laydate;
	});
			

	// 右侧弹出框
	$(".layui-sideSlip").click(function(event) {
		$(".layui-slipBg").show();
		$(".layui-slipContent").animate({right:'0'},400);
	});
	
	
	var ww = $(window).width();
	if(ww > 768){
		$(".tit, .layui-slipBg, .detail .layui-slipConfirm").click(function(event) {
			$(".layui-slipContent").animate({right:'-40%'},400);
			$(".layui-slipBg").hide();
		});
	}else{
		$(".tit, .layui-slipBg, .detail .layui-slipConfirm").click(function(event) {
			$(".layui-slipContent").animate({right:'-100%'},400);
			$(".layui-slipBg").hide();
		});
	}
	</script>

	<!-- 需要左侧弹出框时，将上方js中的right（3个）改为left，并取消下方style注释) -->
	<!-- <style>.layui-slipContent{left: -40%; right: auto;}</style> -->
</body>
</html>